@using CleanArchitecture.Blazor.Application.Features.KeyValues.DTOs
@using CleanArchitecture.Blazor.Application.Features.KeyValues.Queries.ByName
@using CleanArchitecture.Blazor.Application.Features.Products.Commands.AddEdit
@using SixLabors.ImageSharp
@using SixLabors.ImageSharp.Formats
@using SixLabors.ImageSharp.Processing
@inherits MudComponentBase
@inject IStringLocalizer<Products> L
<MudDialog>
    <DialogContent>
        <MudForm Model="model" @ref="form" Validation="@(modelValidator.ValidateValue)">
            <MudGrid>
                <MudItem xs="12">
                    <MudTextField Label="@L["Name"]" @bind-Value="model.Name"
                                  For="@(() => model.Name)"
                                  Required="true"
                                  RequiredError="@L["product name is required!"]"
                                  >
                    </MudTextField>
                </MudItem>
                <MudItem xs="12">
                    <MudTextField Label="@L["Description"]"
                                  Lines="3"
                                  For="@(() => model.Description)"
                                  @bind-Value="model.Description"></MudTextField>
                </MudItem>
                <MudItem xs="12" sm="4">
                    <PicklistAutocomplete Picklist="Picklist.Brand"
                                     Label="@L["Brand"]"
                                     For="@(() => model.Brand)"
                                     ResetValueOnEmptyText="true"
                                     @bind-Value="model.Brand"></PicklistAutocomplete>
                </MudItem>
                <MudItem xs="12" sm="4">
                    <MudNumericField Label="@L["Price"]"
                                     T="decimal"
                                     Format="N2"
                                     For="@(() => model.Price)"
                                     Min="0.00m"
                                     @bind-Value="model.Price"></MudNumericField>
                </MudItem>
                <MudItem xs="12" sm="4">
                    <PicklistAutocomplete Picklist="Picklist.Unit"
                                     Label="@L["Unit"]"
                                     For="@(() => model.Unit)"
                                     ResetValueOnEmptyText="true"
                                     @bind-Value="model.Unit"></PicklistAutocomplete>
                </MudItem>
                <MudItem>
                    <InputFile id="fileInput" OnChange="UploadFiles" hidden multiple accept=".jpg, .jpeg, .png" />
                    <MudText Typo="Typo.caption">@L["Product Pictures"]</MudText>
                    <MudFab HtmlTag="label" Size="MudBlazor.Size.Small" 
                            Color="MudBlazor.Color.Info"
                            Icon="@Icons.Filled.Image"
                            Label="Upload picture"
                            for="fileInput" />
                    <MudText Typo="Typo.body2">@L["The recommended size for uploading images is 640X320"]</MudText>
                    <div class="d-fex">
                        @if (model.Pictures is not null)
                            foreach (var img in model.Pictures)
                            {
                                <MudImage ObjectFit="ObjectFit.Cover"   Height="80" Width="160" Src="@img" Alt="@img" Elevation="25" Class="mr-2 rounded-lg" />
                            }
                    </div>
                </MudItem>
            </MudGrid>
        </MudForm>
    </DialogContent>
    <DialogActions>
        <MudButton OnClick="Cancel">@L["Cancel"]</MudButton>
        <MudButton Color="MudBlazor.Color.Primary" OnClick="Submit">@L["Ok"]</MudButton>
    </DialogActions>
</MudDialog>

@code {
    MudForm form = default!;
    [CascadingParameter]
    MudDialogInstance MudDialog { get; set; } = default!;
    [Inject] private IUploadService _uploadService { get; set; } = default!;
    AddEditProductCommandValidator modelValidator = new AddEditProductCommandValidator();
    [EditorRequired] [Parameter] public AddEditProductCommand model { get; set; } = default!;
    [EditorRequired] [Parameter] public IEnumerable<KeyValueDto> datasource { get; set; } = default!;

    private IList<string>? _prictures = null;

    private async Task UploadFiles(InputFileChangeEventArgs e)
    {
        var list = new List<string>();
        foreach (var file in e.GetMultipleFiles())
        {
            var filestream = file.OpenReadStream();
            var imgstream = new MemoryStream();
            await filestream.CopyToAsync(imgstream);
            imgstream.Position = 0;
            using (var outStream = new MemoryStream())
            {
                using (var image = Image.Load(imgstream, out IImageFormat format))
                {
                    image.Mutate(
                       i => i.Resize(new ResizeOptions() { Mode = ResizeMode.Crop, Size = new SixLabors.ImageSharp.Size(640, 320) }));
                    image.Save(outStream, format);
                    var filename = file.Name;
                    var fi = new FileInfo(filename);
                    var ext = fi.Extension;
                    var result = await _uploadService.UploadAsync(new UploadRequest()
                        {
                            Data = outStream.ToArray(),
                            FileName = Guid.NewGuid().ToString() + ext,
                            Extension = ext,
                            UploadType = UploadType.Product
                        });
                    list.Add(result);
                }
            }
        }
        Snackbar.Add($"upload pictures successfully", MudBlazor.Severity.Info);
        model.Pictures = list;
    }
    async Task Submit()
    {
        await form.Validate();
        if (form.IsValid)
        {
            MudDialog.Close(DialogResult.Ok(true));
        }

    }
    void Cancel() => MudDialog.Cancel();
}
